<template>
	<view class="page">
		<status-bar title='搜索'></status-bar>
		<view class="kite-nav">
			<view class="kite-search-content">
				<view class="kite-search flex-box align-center">
					<text class="iconfont icon-btn_search" @click="goodsSearch"></text>
					<view class="kite-search-input flex">
						<input id="kite-search-goods" :placeholder="searchVal" type="text" 
						     v-model="searchGoods" @confirm="goodsSearch" confirm-type="search"/>		
					</view>
				</view>	
			</view>
		</view>
		<view class="kite-search-history" v-if="goodsShow && hishorys.length > 0">
			<view class="kite-history-title flex-box flex-between">
				<text>历史搜索</text>
				<text class="iconfont icon-shanchu" @click="deleteSearch()"></text>
			</view>
			<view class="kite-history-key kite-key-box">				
				<span v-for="(item,index) in hishorys" :key="index" @click="addTitle(item.title)">{{item.title}}</span>	
				<view class="kite-clear"></view>
			</view>
		</view>
		<view class="kite-search-recommend" v-if="goodsShow && nominate.length > 0">
			<view class="kite-recommend-title flex-box flex-between">
				<text>推荐搜索</text>
				<text class="iconfont" :class="eyeShow?'icon-yanjing1':'icon-Close'" @click="eyeShow = !eyeShow"></text>
			</view>
			<view class="kite-recommend-key kite-key-box" v-if="eyeShow">
				<span v-for="(item,index) in nominate" :key="index" @click="addTitle(item.title)">{{item.title}}</span>
				<view class="kite-clear"></view>
			</view>
		</view>
		<view class="kite-loading" v-if="loading">
			<image :src="staticUrl+'/images/loading.gif'" mode=""></image>
		</view>
		<view class="kite-no-goods" v-if="!goodsShow">
			<empty type='1' cat='3' :msg='"暂无相关"+goodsName'></empty>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	var that;
	export default {
		data() {
			return {
				searchVal:'请输入搜索信息',
				searchGoods:''	,
				eyeShow:true,

				m_id:'',
				hishorys:[],
				nominate:[],
				goodsShow:true,
				loading:false,
				staticUrl: this.staticUrl,
				mode: ''
			}
		},
		onNavigationBarSearchInputConfirmed(){			
			this.goodsSearch();
		},
		
		onLoad(e) {			
			that = this
			that.searchHistory(that.v_id);
			that.searchRecommend();
			that.goodsName = that.goodsName?that.goodsName:'商品'
			if(e.mode) that.mode = e.mode
		},
		methods: {			
			addTitle:function(option){
				that.searchGoods = option;
				that.goodsSearch();
			},
			goodsSearch:function(){	
				if(!that.searchGoods) return this.$Toast('请输入搜索信息');
				that.recordSearch()
				if(that.mode) return this.$rectTo('/otherPage/custom/searchResult?name='+that.searchGoods+'&mode='+that.mode)
				uni.redirectTo({
					url:'/pages/goods/goods_list?name='+that.searchGoods
				});
				// that.loading = true;	
				// if(that.searchGoods != ''){
				// 	that.$http.post({
				// 		url: '/singleSaleApi/searchGoods',
				// 		data: {
				// 			title: that.searchGoods,
				// 			b_id: that.bid,
				// 		}
				// 	}).then(res => {
				// 		that.loading = false;
				// 		if(res.errcode == 100){
				// 			that.goodsShow = true;
				// 			uni.redirectTo({
				// 				url:'/pages/goods/goods_list?name='+that.searchGoods
				// 			});
				// 		}else{
				// 			that.goodsShow = false;
				// 		}
				// 	})
				// }else{
				// 	uni.showModal({
				// 		content:'请输入搜索信息'
				// 	});
				// }				
			},
			searchHistory:function(v_id){
				that.$http.post({
					url: '/singleSaleApi/searchHistory',

				}).then(res => {
					if(res.errcode == 100 && res.data){
						that.hishorys = res.data;
					}
				})
			},
			searchRecommend:function(){
				that.$http.post({
					url: '/singleSaleApi/recommendation',

				}).then(res => {
					if(res.errcode == 100 && res.data){
						that.nominate = res.data;
					}
				})
			},
			deleteSearch:function(){
				that.$http.post({
					url: '/singleSaleApi/delSearchHistory',

				}).then(res => {
					if(res.errcode == 100){
						that.hishorys = [];
					}
				})
			},
			recordSearch:function(){
				that.$http.post({
					url: '/singleSaleApi/saveSearchLog',
					data: {
						title: that.searchGoods
					}
				}).then(res => {
					console.log(res)
				})
			}
		},
		computed:{
			...mapState(['color','vid','share','bid']),
		},
		onShareAppMessage(option) {
			let share = this.share
			return {
				title: share.title,
				desc: share.desc,
				path: '/pages/index/index?share_v_id=' + this.v_id +'&pageType=999',
				imageUrl: share.imageUrl
			}
		},
	}
</script>

<style scoped lang="scss">
	.kite-nav{
		background: none;
		.kite-search-input {
			height: 50upx;
			line-height: 50upx;
			padding: 0 12rpx;
		}
	}
	.kite-search-content{
		width: 90%;
		margin: 0 5%;
	}
	#kite-search-goods{
		width: 100%;
		height: 50upx;
		line-height: 50upx;
	}
	.kite-search-history,.kite-search-recommend{
		width: 100%;
		padding: 20rpx 30rpx 0 30rpx;
	}
	.kite-no-goods {
		width: 100%;
		height: 80upx;
		padding: 20upx 0;
		text-align: center;
		font-size: 28upx;
		font-weight: 400;
		color: #999999;
	}
	.kite-history-title,.kite-recommend-title{
		width: 100%;
		height: 44upx;
		line-height: 44upx;
		text{
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}
		.iconfont{
			color: #CDCDCD;
			font-size: 34rpx;
			font-weight: normal;
		}
	}
	.kite-loading {
		position: fixed;
		width: 100upx;
		height: 100upx;
		top: 50%;
		left: 50%;
		margin-left: -50upx;
		margin-top: -50upx;
		text-align: center;
	}
	
	.kite-loading image {
		width: 100%;
		height: 100%;
	}
	.kite-key-box{
		padding: 20upx 0;
	}
	.kite-key-box span{
		float: left;
		background-color: #EEEEEE;
		border-radius: 30upx;
		padding: 10upx 30upx;
		color: #333333;
		margin:0 14rpx 20rpx 0;
		display: inline-block;
	}
	
</style>
